@import "../global/global";
@import "./table-legacy__toolbar";

.ring-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  font-size: $ring-font-size;
}

.ring-table__header {
  display: table-row;
  background-color: #E4E4E4;
}

.ring-table__header-checkbox {
  display: inline-block;
  position: relative;
  top: 1px;
  left: -2px;
}

.ring-table__title {
  display: table-cell;
  position: relative;
  padding: 0 $ring-unit;

  text-align: left;
  line-height: 23px;
  white-space: nowrap;
  font-size: $ring-font-size-smaller;
  font-weight: normal;

  color: $ring-text-color;
  border-top: 1px solid #BEBEBE;
  border-bottom: 1px solid #D8D8D8;


  &.ring-table__title_active {
    font-weight: bold;
  }

  &:first-child {
    padding-left: $ring-unit*4;
  }

  /* Have to emulate right border because of Fx weird bug —
  *  https://jetpass.myjetbrains.com/youtrack/issue/JPS-1634
  *  Removing border-collapse: collapse from .ring-table helps too,
  *  but to implement nested items markup without it is next to impossible.
  **/
  &:after {
    content: normal;
    display: block;
    position: absolute;
    top: -1px;
    bottom: 0;
    width: 1px;
    right: 0;

    background-color: #BEBEBE;
  }
}

.ring-table__title_border:after {
  content: '';
}

.ring-table__title_nested {
  padding-left: $ring-unit*5;

  // fix header checkbox position in nested table
  .ring-table__header-checkbox {
    left: -26px;
  }
}

.ring-table__toggle {
  display: inline-block;
  position: relative;
  top: 9px;
  width: 12px;
  height: 9px;

  margin-left: $ring-unit*2;
  padding-bottom: 21px;

  color: #B4B4B4;
  font-size: 14px;

  cursor: pointer;

  &:hover {
    color: $ring-text-color;
  }
}

.ring-table__toggle-icon {
  float: right;
}

.ring-table__toggle-icon:hover {
  color: $ring-link-hover-color;
}

.ring-table__column-inline-avatar {
  display: inline-block;
  vertical-align: middle;
}

.ring-table__column-inline-avatar-img {
  margin: -6px 8px;
}

.ring-table__column_selector {
  min-width: 3*$ring-unit;
  padding: 0 !important;
  text-align: center;
}

.ring-table__selector {
  display: inline-block;
  margin: 0 0 0 $ring-unit/2;
}

.ring-table__column {
  display: table-cell;
  border-width: 1px;
  border-color: #D8D8D8;
  border-top-style: solid;
  border-bottom-style: solid;
  border-collapse: collapse;

  padding: $ring-unit - 2 $ring-unit;
  vertical-align: middle;
  white-space: nowrap;

  // Avoid vertical gaps in the middle of the table
  &:last-child {
    width: 100%;
  }

  &:first-child {
    padding-left: 4*$ring-unit;
  }

  &.ring-table__column_gap {
    background-color: #F0F0F0;
    border-bottom-color: transparent !important;
  }

  // Combined class is required here for specificity
  &.ring-table__column_toggle {
    width: $ring-unit*2;
    padding: 0;

    vertical-align: top;
    text-align: right;
  }

  &_right {
    text-align: right;
  }

  &_gray {
    color: $ring-dark-gray-color;
  }

  &_snuggle-right {
    padding-right: 0;
  }

  &_snuggle-left {
    padding-left: 0;
  }

  &_align-right {
    text-align: right;
  }
}

.ring-table__column_gap {
  border-right-style: solid;
  padding-left: $ring-unit*2 !important;
}

.ring-table__column-title {
  font-weight: bold;
}

.ring-table__column_wide {
  min-width: 10*$ring-unit;
}

.ring-table__column_limited {
  @include ring-ellipsis;

  max-width: 50*$ring-unit;
}

.ring-table__column_unlimited {
  @include ring-ellipsis;

  width: 100%;
  max-width: 1px;
}

.ring-table__column_narrow {
  min-width: 3*$ring-unit;
  padding: 0 !important;
}

.ring-table__column-list:not(:last-child):after {
  content: ', ';
}

.ring-table__row {
  display: table-row;
  width: 100%;
  height: 5*$ring-unit;

  &.ring-table__row_ghost {
    background-color: #E8E8E8;
  }

  &.ring-table__row_implicit {
    opacity: 0.5;
  }

  &:hover {
    background-color: #F8F8F8;

    .ring-table__column_gap {
      background-color: #F0F0F0;
    }

  }

  &.ring-table__row_unselectable:hover {
    background-color: initial;
  }

  &.ring-table__row_checked {
    background-color: #DBEAF2;
  }

  &.ring-table__row_active-checked {
    background-color: #DBEAF2;
  }

  &.ring-table__row_active {
    .ring-table__column {
      border-color: $ring-blue-color;
      border-top-style: double; // Using double to override border-top-color because of border collapsed
    }

    .ring-table__column_gap {
      border-color: #B4B4B4;
      border-top-style: none;
    }

    .sidebar__btn {
      visibility: visible;
    }
  }
}

.ring-table__group {
  display: table-row-group;
}

.ring-table__description {
  margin-left: $ring-unit;
  font-size: $ring-font-size-smaller;
  color: #6E6E6E;
}

.ring-table__avatar {
  width: 3*$ring-unit;
  height: 3*$ring-unit + 3; // If avatar is missing
}

.ring-table__avatar-img {
  width: 3*$ring-unit;
  height: 3*$ring-unit;
}

.ring-table__header_sticky {
  position: fixed;
  display: none;
  top: 0;
  width: auto;

  // Set z-index to avoid overlaying icons in rows and fixed header
  z-index: $ring-fixed-z-index;
}

.table__pager {
  padding: 4*$ring-unit 4*$ring-unit;
}

.table__pager-links {
  margin-bottom: 2*$ring-unit;
}

.table__pager-link {
  display: inline-block;
  margin-right: 4*$ring-unit;

  &_disabled {
    color: $ring-dark-gray-color;
  }
}

.table__pager-select {
  float: right;
  display: inline-block;

  .ring-button.ring-select {
    width: auto;
  }
}
